layout: Show important actors above top_window_group

The top_window_group is used for windows like popup menus, which should
appear above shell chrome like the panel.

Since we want important actors such as the screen keyboard or modal
dialogs to be shown above those windows, add their actors after adding
global.top_window_group to this.uiGroup and provide a new function
addTopChrome() to add important chrome above the top_window_group.

Fixes https://gitlab.gnome.org/GNOME/gnome-shell/issues/917

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/358

diff --git a/js/ui/layout.js b/js/ui/layout.js
index 30e750dc5fa8f437b7c1bff21c893ea355e8f169..b98827a3ca823fbc37b694c6d4a66835ebedf00b 100644 (file)
--- a/js/ui/layout.js
+++ b/js/ui/layout.js
@@ -216,10 +216,17 @@ var LayoutManager = GObject.registerClass({
         this.uiGroup = new UiActor({ name: 'uiGroup' });
         this.uiGroup.set_flags(Clutter.ActorFlags.NO_LAYOUT);
 
+        global.stage.add_child(this.uiGroup);
+
         global.stage.remove_actor(global.window_group);
         this.uiGroup.add_actor(global.window_group);
 
-        global.stage.add_child(this.uiGroup);
+        // Using addChrome() to add actors to uiGroup will position actors
+        // underneath the top_window_group.
+        // To insert actors at the top of uiGroup, we use addTopChrome() or
+        // add the actor directly using uiGroup.add_actor().
+        global.stage.remove_actor(global.top_window_group);
+        this.uiGroup.add_actor(global.top_window_group);
 
         this.overviewGroup = new St.Widget({ name: 'overviewGroup',
                                              visible: false,
@@ -231,7 +238,7 @@ var LayoutManager = GObject.registerClass({
                                                  clip_to_allocation: true,
                                                  layout_manager: new Clutter.BinLayout(),
                                                });
-        this.addChrome(this.screenShieldGroup);
+        this.addTopChrome(this.screenShieldGroup);
 
         this.panelBox = new St.BoxLayout({ name: 'panelBox',
                                            vertical: true });
@@ -247,7 +254,7 @@ var LayoutManager = GObject.registerClass({
         this.keyboardBox = new St.BoxLayout({ name: 'keyboardBox',
                                               reactive: true,
                                               track_hover: true });
-        this.addChrome(this.keyboardBox);
+        this.addTopChrome(this.keyboardBox);
         this._keyboardHeightNotifyId = 0;
 
         // A dummy actor that tracks the mouse or text cursor, based on the
@@ -255,9 +262,6 @@ var LayoutManager = GObject.registerClass({
         this.dummyCursor = new St.Widget({ width: 0, height: 0, opacity: 0 });
         this.uiGroup.add_actor(this.dummyCursor);
 
-        global.stage.remove_actor(global.top_window_group);
-        this.uiGroup.add_actor(global.top_window_group);
-
         let feedbackGroup = Meta.get_feedback_group_for_display(global.display);
         global.stage.remove_actor(feedbackGroup);
         this.uiGroup.add_actor(feedbackGroup);
@@ -802,6 +806,16 @@ var LayoutManager = GObject.registerClass({
         this._trackActor(actor, params);
     }
 
+    // addTopChrome:
+    // @actor: an actor to add to the chrome
+    // @params: (optional) additional params
+    //
+    // Like addChrome(), but adds @actor above all windows, including popups.
+    addTopChrome(actor, params) {
+        this.uiGroup.add_actor(actor);
+        this._trackActor(actor, params);
+    }
+
     // trackChrome:
     // @actor: a descendant of the chrome to begin tracking
     // @params: parameters describing how to track @actor